<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-router基础</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- router-link是vue提供的标签,默认会被渲染为a标签
              to属性被会渲染为href属性
              to属性中的值被渲染为采用#开头的hash地址
        -->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{name:'user',params:{id:3}}">User3</router-link>
      <router-link to="/user/4">User4</router-link>

      <!-- 路由占位符(路由填充位) -->
      <router-view></router-view>
    </div>
    <script>
      const User = {
        props: ["id", "uname", "gender"],
        template: `<h1>User组件--id={{id}},uname={{uname}},gender={{gender}}</h1>`,
      };

      //实例化路由对象
      const router = new VueRouter({
        //通过routes属性,定义路由规则
        routes: [
          { path: "/", redirect: "/user/1" },
          {
            path: "/user/:id",
            name:'user', //命名路由
            component: User,
            props: (route) => ({
              id: route.params.id,
              uname: "haoren",
              gender: "F",
            }),
          },
        ],
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //router:router
        router,
      });
    </script>
  </body>
</html>
